<template>
  <div class="form">
    <div class="title">生成计划</div>
    <el-form ref="form"
             :disabled="seeFlag"
             :model="form"
             label-width="120px"
             size="small"
             inline
             label-suffix="："
             :rules="rules">
      <el-form-item label="申请人"
                    prop="cstCoperName">
        <el-input v-model="form.createUser"
                  placeholder=""
                  clearable
                  disabled
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="作业码头"
                    prop="termCode">
          <el-select clearable style="width: 150px" size="small"  @change="getMyVal"
                   v-model="form.termCode" placeholder="请选择作业码头"  :disabled="termDis">
            <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="计划类型"
                    prop="planType">
        <el-input v-model="form.planTagName1"
                  placeholder=""
                  clearable
                  disabled
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="货名"
                    prop="plansExt.goodsName">
        <el-select v-model="form.plansExt.goodsCode"
                   placeholder="请选择"
                   @change="setGood"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.goodCode"
                     :key="item.id"
                     :label="item.name"
                     :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作业方式"
                    prop="plansExt.opprc" v-if="showC">
        <el-select v-model="form.plansExt.opprc"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.BOX_OPPRC"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="作业方式"
                    prop="opprc" v-else>
        <el-select v-model="form.opprc"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.BOX_OPPRC"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="操作方法"
                    prop="plansExt.actionMethod">
        <el-select v-model="form.plansExt.actionMethod"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.UNBOX_OP_METHOD"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
      </el-form-item>
      <!-- 如果拆箱业务 -->
      <template v-if="type=='unpacking'">
        <el-form-item label="辅材"
                      prop="plansExt.auxiliaryMaterials">
          <el-select v-model="form.plansExt.auxiliaryMaterials"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.UNBOX_AUX_MAT"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拆空方式"
                      prop="plansExt.demolitionMethod">
          <el-select v-model="form.plansExt.demolitionMethod"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.UNBOX_EMPTY_OP"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <!-- 如果装箱业务 -->
      <template v-if="type=='packing'">
        <el-form-item label="船名航次"
                      prop="voyId">
           <el-tooltip :content="form.voyName"
                      placement="bottom"
                      popper-class="testtooltip" v-if="seeFlag">
                      <el-select v-model="form.voyId"
                            placeholder="搜索查询更多"
                            clearable
                            filterable
                            size="small"
                            remote
                            :remote-method="getMyVal1"
                            style="width:150px">
                            <!-- +item.iefg -->
                        <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"   
                        v-for="item,index in shipNo" :key="index"></el-option>
                  </el-select>
         </el-tooltip>                     
            <el-select v-model="form.voyId"
                     placeholder="搜索查询更多"
                     clearable
                     filterable
                     size="small"
                      remote
                      :remote-method="getMyVal1"
                     style="width:150px"
                     v-else>
                     <!-- +item.iefg -->
                <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"   
                v-for="item,index in shipNo" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卸货港"
                      prop="plansExt.potUnldport">
            <el-select v-model="form.plansExt.potUnldport"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
              <el-option :label="item.portlocnnm"
                     :value="item.portcd"
                     v-for="item,index in dataList.ports"
                     :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="目的港"
                      prop="plansExt.potDstnport">
          <el-select v-model="form.plansExt.potDstnport"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
              <el-option :label="item.portlocnnm"
                     :value="item.portcd"
                     v-for="item,index in dataList.ports"
                     :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="内外贸"
                      prop="tradeFlag">
          <el-select v-model="form.tradeFlag"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.INTERNALFG_IM" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提单号"
                      prop="plansExt.billNo">
          <el-input v-model="form.plansExt.billNo"
                    placeholder="请输入"
                    clearable
                    filterable
                    style="width:150px">
          </el-input>
        </el-form-item>
        <el-form-item label="重量（吨）"
                      prop="plansExt.goodsWeight">
          <el-input v-model="form.plansExt.goodsWeight"
                    placeholder="请输入"
                    clearable
                    filterable
                    style="width:150px">
          </el-input>
        </el-form-item>
      </template>
      <el-form-item label="开始时间"
                    prop="opsttm">
        <el-date-picker type="datetime"
                        @change="setVal"
                        placeholder="选择日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.opsttm"
                        style="width:150px"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间"
                    prop="opedtm">
        <el-date-picker type="datetime" 
                        placeholder="选择日期"
                        disabled
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.opedtm"
                        style="width:150px"></el-date-picker>
      </el-form-item>
      <el-form-item label="结算方式"
                    prop="payMode">
        <el-select v-model="form.payMode"
                  disabled
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.SETTLEMODE"
                     :key="item.lowValue"
                     :label="item.meaning"
                     :value="item.lowValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款单位"
                    prop="payer">
        <el-select v-model="form.payer"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.cstCoperListtomer"
                     :key="item.customerCode"
                     :label="item.name"
                     :value="item.customerCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货主单位"
                    prop="consignor">
        <el-select v-model="form.consignor"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.consignor"
                     :key="item.customerCode"
                     :label="item.name"
                     :value="item.customerCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票抬头"
                    prop="title">
        <el-input v-model="form.title"
                  placeholder="请输入"
                  clearable
                  filterable
                  style="width:150px">
        </el-input>
      </el-form-item>

      <el-form-item label="江铃汽车"
                    prop="plansExt.jmcPacking">
          <el-select v-model="form.plansExt.jmcPacking"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
              <el-option v-for="item in jmcPackingList"
                         :key="item.lowValue"
                         :label="item.meaning"
                         :value="item.lowValue"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="备注"
                    prop="remark"
                    style="display:block">
        <el-input type="textarea"
                  placeholder="请输入船期备注"
                  clearable
                  v-model="form.remark"
                  style="width:710px"></el-input>
      </el-form-item>
      <!-- v-if="showUpload" -->
      <el-form-item label="附件"
                    prop="planAttachmentList"
                    style="display:block">
        <uploadImg @set="getFile" ref="myUpload"></uploadImg>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary"
                 v-if="!seeFlag"
                 :loading="loading"
                 @click="getDate"
                 class="search">生成计划
      </el-button>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/components/uploadImg.vue'
import moment from 'moment'
export default {
  name: 'unpackingForm',
  props: {
    type: {
      default: 'unpacking',
    },
    Tag: '',
    seeFlag:{
      default:false
    },
    planTag:{
      default:null
    },
    termDis:{
      default:true,
    },
    showC:{
      default:false
    }
  },
  watch: {
    form(){
      if(this.form.id){
        this.getMyVal1()
      }
    },
    Tag() {
      let that = this
      this.$nextTick(() => {
        that.palnTagList.forEach((item) => {
          if (that.Tag === item.key) {
            that.form.planTag1 = item.key
            that.form.planTagName1 = item.value
            if(['提空返重（不指定箱号）','提空返重（指定箱号）','进空箱','进重箱','提空箱（不指定箱号）','装箱（不指定箱号）'].includes(that.form.planTagName1)){
              this.form.opedtm='9998-12-31 23:59:59'
              this.$forceUpdate()
            }
          }
        })
      })
    },
  },
  components: { uploadImg },
  data() {
    return {
      termList:[],
      loading:false,
      palnTagList: [
        { key: 'PFRE', value: '提重返空' },
        { key: 'PERF_WC', value: '提空返重（指定箱号）' },
        { key: 'PERF_NC', value: '提空返重（不指定箱号）' },
        { key: 'PE_WC', value: '提空箱（指定箱号）' },
        { key: 'PE_NC', value: '提空箱（不指定箱号）' },
        { key: 'PF', value: '提重箱' },
        { key: 'IF', value: '进重箱' },
        { key: 'IE', value: '进空箱' },
        { key: 'UNBOX', value: '拆箱' },
        { key: 'BOX1', value: '装箱（指定箱号）' },
        { key: 'BOX2', value: '装箱（不指定箱号）' },
      ],
      form: {opedtm:'',opsttm: '',plansExt:{},payMode:'ZD'},
      rules: {
          termCode: [
            { required: true, message: '请选择作业码头', trigger: 'blur' },
          ],
          opprc: [
            { required: true, message: '请选择作业方式', trigger: 'change' }
          ],
          "plansExt.opprc": [
            { required: true, message: '请选择作业方式', trigger: 'change' }
          ],
          'plansExt.actionMethod': [
            { required: true, message: '请选择操作方法', trigger: 'change' }
          ],
          voyId: [
            { required: true, message: '请选择船名航次', trigger: 'change' }
          ],
          tradeFlag: [
            { required: true, message: '请选择内外贸', trigger: 'change' }
          ],
          'plansExt.billNo': [
            { required: true, message: '请填写提单号', trigger: 'blur' }
          ],
          "plansExt.goodsName": [
            { required: true, message: '请填写货名', trigger: 'blur' }
          ],
          opsttm: [
            { required: true, message: '请填写开始时间', trigger: 'change' }
          ],
          opedtm: [
            { required: true, message: '请填写结束时间', trigger: 'change' }
          ],
          "plansExt.potUnldport":[
            { required: true, message: '请选择卸货港', trigger: 'change' }
          ],

          "plansExt.potDstnport":[
            { required: true, message: '请选择目的港', trigger: 'change' }
          ],
          payMode:[
            { required: true, message: '请选择结算方式', trigger: 'change' }
          ],
          payer:[
            { required: true, message: '请选择付款单位', trigger: 'change' }
          ],
          planAttachmentList: [
            { required: true, message: '请选择文件', trigger: 'blur' }
          ],
      },
      dataList: {},
      payMode: [
        { value: '现金', key: 'XJ' },
        { value: '月结', key: 'ZD' },
      ],
      jmcPackingList: [{"lowValue": "N", "meaning": "否"},{"lowValue": "Y","meaning": "是"}], // 是否江铃汽车
      shipNo:[],
    }
  },
  methods: {
    voyId(id){
      //console.log(this.shipNo)
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
          console.log(this.form.voyName)
        }
      })
    },
    setVal(){
      if(''!==this.form.opsttm){
        console.log(9999)
        if(['提重返空','提重','提空箱（指定箱号）','拆箱','装箱（指定箱号）'].includes((this.form.planTagName1))){
            console.log(this.form.opsttm)
            this.form.opedtm=moment(this.form.opsttm).add(7,'days').subtract(1,'seconds').format('YYYY-MM-DD HH:mm:ss')
            this.$forceUpdate()
            //.subtract(1,'seconds')
        }
      }
    },
    getMyVal(){

      // delete this.form.voyId
      // this.getMyVal1()
    },
    getMyVal1(val = ''){
      console.log(this.$route.name,"this.$route.name == 'emptyBoxNoNum'?'CONTAINER':''2222222222222222222222");
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:(this.$route.name == 'packingNum' || this.$route.name == 'packingNoNum')?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
          if(this.form.id){
            this.voyId(this.form.voyId)
          }
        }).catch()
    },
    setGood(val){
      //this.form.plansExt.goodsCode
      this.form.plansExt.goodsName =  this.dataList.goodCode.filter(item1 => val===item1.type)[0]?.name || '';
      //console.log(val)
      //console.log(this.form.plansExt.goodsName)
    },
    getWork() {
      this.$api
        .opaAreaCode({
          termCode: this.form.termCode,
        })
        .then((res) => {
          this.dataList.workZone = res.data.data
          this.$forceUpdate()
        })
        .catch()
    },
    set(val) {
      console.log("--------------" + val + "-----------")
      this.form.termCode = val
      this.$forceUpdate()
    },
    getDate() {
      this.$emit('add')
    },
    getFile(res) {
      this.$set(this.form,'planAttachmentList',res)
    },
    setFile() {
      let par = {}
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      //货名
      this.$api.goodsNewName().then(res => {
        console.log(res,'999999999999999');
        
        this.dataList.goodCode = res.data
			})
      //贸易类型
      this.$api.refCode({
        domain:'INTERNALFG_IM'
      }).then(res=>{
        this.dataList.INTERNALFG_IM=res.data.data
        this.$forceUpdate()
      }).catch()
      //港口
       this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
        }).catch()

      
      //操作方法
      this.$api.refCode({
          domain: 'UNBOX_OP_METHOD',
        })
        .then((res) => {
          this.dataList.UNBOX_OP_METHOD = res.data.data
          this.$forceUpdate()
        })
        .catch()
        //作业方式
        let  boxPacking=''
        if(null===this.planTag){
          boxPacking='UNBOX_OPPRC'
        }else{
          boxPacking='BOX_OPPRC'
        }
      this.$api.refCode({
          domain: boxPacking,
        })
        .then((res) => {
          this.dataList.BOX_OPPRC = res.data.data
          this.$forceUpdate()
        })
        .catch()
      //拆空方式
      this.$api
        .refCode({
          domain: 'UNBOX_EMPTY_OP',
        })
        .then((res) => {
          this.dataList.UNBOX_EMPTY_OP = res.data.data
          this.$forceUpdate()
        })
        .catch()
      //辅材
      this.$api
        .refCode({
          domain: 'UNBOX_AUX_MAT',
        })
        .then((res) => {
          this.dataList.UNBOX_AUX_MAT = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'SETTLEMODE',
        })
        .then((res) => {
          this.dataList.SETTLEMODE = res.data.data
          this.$forceUpdate()
        })
        .catch()

      this.$api
        .customerByType({
          tenantTypeName: '货主',
        })
        .then((res) => {
          this.dataList.consignor = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customerByType({
          tenantTypeName: '运输公司',
        })
        .then((res) => {
          this.dataList.cstTrnscomCd = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customer()
        .then((res) => {
          this.dataList.cstCoperListtomer = res.data.data
          this.$forceUpdate()
        })
        .catch()
        this.getMyVal1()
      let info = localStorage.getItem('userInfo')
      console.log(info)
      if (undefined !== info && !this.form.cstCstmcd) {
        this.form.cstCstmcd = JSON.parse(info).customerCode
        this.form.createUser = JSON.parse(info).name
      }
    },
  },

  computed: {},
  created(){
    this.setFile()
  },
  mounted() {
    
    //this.getDate()
  },
}
</script>
<style lang='less' scoped>
.form {
  margin-top: 25px;
  background-color: #fff;
  padding: 20px;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    border-left: 5px solid #0f47b8;
    line-height: 16px;
    padding-left: 8px;
    margin-bottom: 25px;
  }
}
.btn {
  text-align: center;
  .search {
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}
/deep/ .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
</style>